.el-menu-vertical-demo {
  height: 900px;
}
.el-menu-vertical-demo .item .icon {
  background-image: url('@/assets/menu-icon.png');
  background-size: cover;
  width: 23px;
  height: 40px;
  margin-right: 44px;
}
.el-menu-vertical-demo .item .title {
  width: 64px;
  height: 25px;
  opacity: 1;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 23.17px;
  color: #000000;
  text-align: left;
  vertical-align: top;
}
.el-menu-vertical-demo :deep(.el-menu-item) {
  color: black;
}
.el-menu-vertical-demo :deep(.el-menu-item.is-active) {
  color: #515cd8;
  font-weight: 600;
}
.el-menu-vertical-demo :deep(.el-sub-menu.is-active) {
  border: 2px solid blue;
  color: black;
  background-color: #D1D5FF !important;
  border-radius: 8px;
}
.el-menu-vertical-demo :deep(.el-sub-menu.is-active) .icon {
  background-image: url('@/assets/menu-icon-active.png');
  background-size: cover;
  width: 23px;
  height: 40px;
  margin-right: 44px;
}
.el-menu-vertical-demo-active {
  height: 1700px;
}
.el-menu-vertical-demo-active .item .icon {
  background-image: url('@/assets/menu-icon.png');
  background-size: cover;
  width: 23px;
  height: 40px;
  margin-right: 44px;
}
.el-menu-vertical-demo-active .item .title {
  width: 64px;
  height: 25px;
  opacity: 1;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 23.17px;
  color: #000000;
  text-align: left;
  vertical-align: top;
}
.el-menu-vertical-demo-active :deep(.el-menu-item) {
  color: black;
}
.el-menu-vertical-demo-active :deep(.el-menu-item.is-active) {
  color: #515cd8;
  font-weight: 600;
}
.el-menu-vertical-demo-active :deep(.el-sub-menu.is-active) {
  border: 2px solid blue;
  color: black;
  background-color: #D1D5FF !important;
  border-radius: 8px;
}
.el-menu-vertical-demo-active :deep(.el-sub-menu.is-active) .icon {
  background-image: url('@/assets/menu-icon-active.png');
  background-size: cover;
  width: 23px;
  height: 40px;
  margin-right: 44px;
}
